<template>
  <div calss="approvalStyle">
    <a-button @click="handleClick">antDesignVueButton</a-button>
    <a-table
      :data-source="tableData"
      :columns="columns"
      :customRow="customRow"
      size="small"
      table-layout="fixed"
      bordered="true"
      @resizeColumn="handleResizeColumn"
    ></a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import axios from "axios";
import type { TableColumnsType } from "ant-design-vue";

axios.defaults.baseURL = "/api";

export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const handleClick = () => {
      console.log("点击了按钮");
    };

    axios
      .get("/vue3user/selectAll")
      .then((res) => {
        console.log("网络请求成功，res:", res);
      })
      .catch((err) => console.log(err));

    const columns = ref<TableColumnsType>([
      {
        title: "id",
        key: "id",
        dataIndex: "id",
        resizable: false,
        width: 40,
      },
      {
        title: "名称",
        key: "name",
        dataIndex: "name",
        resizable: true,
        width: 20,
      },
      {
        title: "真实名称",
        key: "realname",
        dataIndex: "realname",
        resizable: true,
        minWidth: 40,
        maxWidth: 200,
        width: 40,
      },
      {
        title: "手机号码",
        key: "cellphone",
        dataIndex: "cellphone",
        resizable: true,
        width: 50,
      },
      {
        title: "创建时间",
        key: "createAt",
        dataIndex: "createAt",
        resizable: false,
        width: 500,
      },
    ]);

    const tableData = reactive([
      {
        key: 6,
        id: 6,
        name: "Emma",
        realname: "艾玛11",
        cellphone: "852369",
        enable: null,
        departmentId: 1,
        roleId: 1,
        createAt: null,
        updateAt: null,
      },
      {
        key: 7,
        id: 7,
        name: "Melody",
        realname: "梅洛迪",
        cellphone: "963",
        enable: 1,
        departmentId: 1,
        roleId: 1,
        createAt: "2021-10-05 14:55:02",
        updateAt: null,
      },
      {
        key: 8,
        id: 8,
        name: "Alice",
        realname: "艾丽丝",
        cellphone: "11111",
        enable: 1,
        departmentId: 1,
        roleId: 1,
        createAt: "2021-10-05 14:55:02",
        updateAt: null,
      },
      {
        key: 9,
        id: 9,
        name: "Jacquelyn",
        realname: "杰奎琳",
        cellphone: "",
        enable: 1,
        departmentId: 1,
        roleId: 1,
        createAt: "2021-10-05 14:56:34",
        updateAt: null,
      },
      {
        key: 10,
        id: 10,
        name: "Bella",
        realname: "贝拉",
        cellphone: "88852",
        enable: 1,
        departmentId: 1,
        roleId: 1,
        createAt: "2021-10-05 14:56:34",
        updateAt: null,
      },
    ]);

    let change1: any;
    let change2: any;
    function customRow(record: any, index: any) {
      console.log(record, index); // 这里输出是表格全部的数据
      return {
        props: {
          draggable: "true",
        },
        style: {
          cursor: "pointer",
        },
        // 鼠标移入
        onMouseenter: (event: any) => {
          // 兼容IE
          var ev = event || window.event;
          ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
        },
        // 开始拖拽
        onDragstart: (event: any) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到源目标数据序号
          change1 = index;
          console.log(record, index, "source");
        },
        // 拖动元素经过的元素
        onDragover: (event: any) => {
          // 兼容 IE
          var ev = event || window.event;
          // 阻止默认行为
          ev.preventDefault();
        },
        // 鼠标松开
        onDrop: (event: any) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到目标数据序号
          change2 = index;
          // 下面是原作者的方法，将两行数据调换位置
          // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
          // [tableData[change1], tableData[change2]] = [
          //   tableData[change2],
          //   tableData[change1],
          // ];

          // 调整行的排序
          bubbleJumpQueue(change1, change2, tableData);

          console.log(record, index, "target");
        },
      };
    }

    /**
     * 拖动行重新排序
     * sourceIndex：被拖动的行 index
     * targetIndex：释放行时所在的行 index
     * arr：表格数据数组
     */
    function bubbleJumpQueue(
      sourceIndex: number,
      targetIndex: number,
      arr: any[]
    ) {
      let objIndex = sourceIndex;
      // 从下向上调整
      if (sourceIndex > targetIndex) {
        let currentIndex = sourceIndex - 1;
        while (currentIndex >= targetIndex) {
          [arr[currentIndex], arr[objIndex]] = [
            arr[objIndex],
            arr[currentIndex],
          ];
          objIndex = currentIndex;
          currentIndex--;
        }
      } else {
        // 从上向下调整
        let currentIndex = sourceIndex + 1;
        while (currentIndex <= targetIndex) {
          [arr[objIndex], arr[currentIndex]] = [
            arr[currentIndex],
            arr[objIndex],
          ];
          objIndex = currentIndex;
          currentIndex++;
        }
      }
    }

    return {
      handleClick,
      columns,
      tableData,
      customRow,
      handleResizeColumn: (w: any, col: any) => {
        col.width = w;
      },
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.approvalStyle {
  .listStyle {
    font-size: 16px;
    padding: 20px;
    background: #fff;
    width: 300px;
    border: 1px solid #efefef;
  }
}
</style>
